<template>
  <div >
    <div style="height:40px;margin-top:20px;">
      <ul class="infro">
        <li @click="reviewed" style="margin-left:0;">
          待审核
          <div class="info" v-show="depate==0"></div>
        </li>
        <li @click="passed">
          已通过
          <div class="info" v-show="depate==1"></div>
        </li>
        <li @click="rejected">
          已拒绝
          <div class="info" v-show="depate==2"></div>
        </li>
      </ul>
    </div>
      <div class="index">
         <div style="width:260px;">
          <span style="margin-right:10px;">商家名称</span>
          <input
            type="text"
            v-model="shopName"
            placeholder="请输入店铺名称"
          />
        </div>
        <div style="width:280px;">
          <span style="margin-right:10px;">注册手机号</span>
          <input
            type="text"
            v-model="shopPhone"
            placeholder="请输入店铺名称"
          />
        </div>
          <div class="item-box">
            <span class="search-text" style="margin-right:10px;">日期</span>
              <el-date-picker v-model="indatetime" style="height:42px;" size="small" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
          </div>
        <div >
          <div >
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="searchClick" v-show="query==0">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="searchClick1" v-show="query==1">查询</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="searchClick2" v-show="query==2">查询</span>
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="emptyClick" v-show="query==0">清空</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="emptyClick1" v-show="query==1">清空</span> 
            <span class="my-btn my-back-blue" style="height:28px;line-height:28px;margin-left:10px;" @click="emptyClick2" v-show="query==2">清空</span> 
          </div>
        </div>
      </div>
    <div class="table" v-show="number==1">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="shopName" label="商家名称"></el-table-column>
        <el-table-column prop="shopPhone" label="注册手机号"></el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==0?'待审核':'已审核'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(1,scope.row)" type="text">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <div class="table" v-show="number==2">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="shopName" label="商家名称"></el-table-column>
        <el-table-column prop="shopPhone" label="注册手机号"></el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==1?'已通过':'有效'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(2,scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
   

      <div class="table" v-show="number==3">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="shopName" label="商家名称"></el-table-column>
        <el-table-column prop="shopPhone" label="注册手机号"></el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span>{{scope.row.checkState==2?'已拒绝':'有效'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(3,scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <el-pagination
                v-show="detalrede==1"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
      <el-pagination
                v-show="detalrede==2"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
      <el-pagination
                v-show="detalrede==3"
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      depate:0,
      number:1,
      detalrede:1,
      query:0,
      checkState: 0,
      checkStat:1,
      checkSta:2,
      merchantName:'',
      indatetime:[],
      merchantNo:'',
      leader:'',
      shopName:'',
      startTime:'',
      shopPhone:'',
      endTime:'',
      dateVuale:'',
      page: 1,
      pageSize: 5,
      currentPage:1,
      total:0,
      searchvalue1: "", //合同状态
      searchoptions1: [
        //合同状态
        { label: "有效", value: "1" },
        { label: "无效", value: "0" },
      ],
      arr: [],
    };
  },
  mounted() {
    this.loadShopList();
  },
  
  methods: {
      reviewed(){
       this.shopName='',
       this.shopPhone='',
       this.indatetime=[],
        this.number=1
        this.depate=0
        this.detalrede=1
        this.query=0
        var param = {
          checkState:this.checkState,
          page: this.page,
          pageSize: this.pageSize,
          // shopName:this.shopName ,
          // shopPhone:this.shopPhone ,
          // startTime: this.startTime,
          // endTime:this.endTime
        };

        this.axios({
          url: "/check/getAll",
          method: "post",
          data: JSON.stringify(param),
        }).then((res) => {
            this.arr = res.data.data.list;
            this.total=res.data.data.total
        });
        },
    passed(){
      this.shopName='',
      this.shopPhone='',
      this.indatetime=[],
      this.number=2
      this.depate=1
      this.detalrede=2
      this.query=1
      var param = {
        checkState:this.checkStat,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
    rejected(){
      this.shopName='',
      this.shopPhone='',
      this.indatetime=[],
      this.number=3
      this.depate=2
      this.detalrede=3
      this.query=2
      var param = {
        checkState:this.checkSta,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
    //分页
    handleSizeChange(val) {
          this.pageSize = val;
          this.reviewed();
        },
     handleCurrentChange(val) {//分页
          this.page = val;
          this.reviewed();
        },
       //分页
    handleSizeChange1(val) {
          this.pageSize = val;
          this.passed();
        },
     handleCurrentChange1(val) {//分页
          this.page = val;
           this.passed();
        },
          //分页
    handleSizeChange2(val) {
          this.pageSize = val;
          this.rejected();
        },
    handleCurrentChange2(val) {//分页
      this.page = val;
      this.rejected();
    },
    // 处理
    handleClick(type,row){
      this.$router.push({
        path:'/index/occupancyApplicationcl',
        query:{shopId:row.shopId,type:type}
      })
  },
    //编辑
    edit(row){
       this.$router.push({
        path:'/index/editMerchant',
        query:{row:row}
      })
    },
    // 添加商家按钮
    addMerchant() {
      this.$router.push("/index/addMerchant")
    },
    // 清空
    emptyClick() {
      this.reviewed()
    },
    // 清空
    emptyClick1() {
      this.passed()
    },
    // 清空
    emptyClick2() {
      this.rejected()
    },
    //查询
    searchClick() {
      this.detalrede=1
      var param = {
        checkState:this.checkState,
        page: this.page,
        pageSize: this.pageSize,
        shopName:this.shopName ,
        shopPhone:this.shopPhone ,
        startTime:this.indatetime[0],
        endTime:this.indatetime[1]
      };
     console.log(this.indatetime[0],'4444444444444444444')
     console.log(this.indatetime[1],'4444448888888888888444444')
      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
    // 查询1
    searchClick1() {
      this.detalrede=2
         var param = {
              checkState:this.checkStat,
              page: this.page,
              pageSize: this.pageSize,
              shopName:this.shopName ,
              shopPhone:this.shopPhone ,
            startTime:this.indatetime[0],
             endTime:this.indatetime[1]
      };
      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
        console.log('列表',res)
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
    },
     // 查询2
    searchClick2() {
           this.detalrede=3
            var param = {
              checkState:this.checkSta,
              page: this.page,
              pageSize: this.pageSize,
              shopName:this.shopName ,
              shopPhone:this.shopPhone ,
              startTime:this.indatetime[0],
              endTime:this.indatetime[1]
      };
      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      });
      // this.emptyClick();
    },
    //获取商户财务报表数据
    loadShopList() {
        this.shopName=''
        this.shopPhone=''
        this.startTime=''
        this.endTime=''
         this.detalrede=1
      var param = {
        checkState:this.checkState,
        page: this.page,
        pageSize: this.pageSize,
        // shopName:this.shopName ,
        // shopPhone:this.shopPhone ,
        // startTime: this.startTime,
        // endTime:this.endTime
      };

      this.axios({
        url: "/check/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
           this.total=res.data.data.total
      
      });
    },
  },
  watch: {},
};
</script>

<style scoped>
/* 申请事件中间的“至”的样式 */
.index>>> .el-range-editor--small .el-range-separator {
  line-height: 32px;
}
.infro li{
  float: left;
  margin: 20px;
}
.info{
  border-bottom:3px solid rgb(253, 81, 81);
  margin-top: 6px;
  
}
.index{
  display: flex;
  margin-top: 50px;


}

/* 表格 */
.table-box {
  margin-top: 40px;
}
.table {
  margin-top:20px;
}

</style>